<template>
	<div 
		class="nav-button"
		@click="$emit('click', index)">
		<div>
			<span class="nav-button__text">
				{{ text }}
			</span>
		</div>
		
	</div>
</template>

<script>
    export default {
		props: {
			icon: {
				type: String,
			},
			text: {
				type: String
			},
			bgColor: {
				type: String,
				default: () => 'white'
			},
			index: {
				type: Number
			}
		},
        data() {
            return {

            }
        }
    }
</script>

<style lang="scss" scoped>
	.nav-button {
		display: block;
		width: 100%;
		height: 120px;
		transition: transform 0.3s cubic-bezier(0,0,0,1);
		padding: 10px;
		box-sizing: border-box;
		
		& > div {
			color: #aaaaaf;
			cursor: pointer;
			width: 100%;
			height: 100%;
			position: relative;
			transition: box-shadow 0.3s;
			overflow: hidden;
			border: 1px solid rgba(66,76,119,0.1);
			border-radius: 5px;
			// box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, .2);
			
			&::before {
				width: 100%;
				height: 100%;
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				background-size: 100%;
				background-position: 50% 50%;
				background-blend-mode: overlay;
				background-image: url(https://emersonkeeling.files.wordpress.com/2015/12/ahfod.gif);
				background-color: rgba(43,26,119,0.25);
				transition: all 0.2s;
				filter: blur(3px);
			}
		}
		
		&__text {
			width: 100%;
			height: 50px;
			margin-top: -25px;
			top: 50%;
			position: absolute;
			line-height: 50px;
			display: block;
			text-align: center;
			font-size: 1.5rem;
			opacity: 1;
		}
		
	}
</style>


